<html>
<head>
   <script src="../../Grid/GridE.js"> </script>
</head>
<body class="Tutorial">
   <style>
      /* Tutorial shared styles */
      .Tutorial h1,.Tutorial h2,.Tutorial ul,.Tutorial .Desc,.Tutorial .Path,.Tutorial .Xml { max-height:999999px; }
      .Tutorial h1 { font:30px Arial; padding:5px 0px 5px 0px; margin:0px; text-align:center; }
      .Tutorial h2 { font:15px Arial; padding:0px; margin:0px 0px 10px 0px; text-align:center; color:#757575; }
      .Tutorial h3,.Tutorial h4 { display:inline-block; font:bold 15px Arial; padding:0px 5px 0px 5px; border-radius:2px; color:black; margin:2px; font-style:normal; color:#333; }
      .Tutorial h3 { background:#EE9; border:1px solid #DD8; }
      .Tutorial h4 { background:#BDE; border:1px solid #ACD; }
      .Tutorial a { text-decoration:underline; }      
      .Tutorial li { padding-bottom:8px; }
      .Tutorial ul { margin:6px 0px 0px 20px; font:13px Arial; }
      .Tutorial > ul { margin-left:0px; padding-left:15px; clear:both; }
      .Tutorial ul b { color:#0585B9; }
      .Tutorial .Path { font:normal 12px Arial; color:#0585B9; }
      .Tutorial .Path b { color:#D73938; }
      .Tutorial .Path u { text-decoration:none; color:black; font-weight:bold; padding:0px 2px 0px 2px; }
      .Tutorial .Xml { margin-bottom:6px; font-size:12px; color:#757575; }
      .Tutorial .Border { border:1px solid #dfdfdf; padding:10px 20px 10px 20px; margin:0px 8px 20px 0px; min-width:100%; box-sizing:border-box; }
      .Tutorial .Main { }

      .Border b { color:#0585B9; }
   </style>
   <center class="Path"><script>document.write(location.href.replace(/(.*)(\/Tutorials\/)([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/$4").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
   <h1>7. Run box as task</h1>
   <h2>Every Run box as independent Gantt task</h2>
   <center class="Border" id="Border">
      <div class="Xml">Source: <a href='07-Run_box_as_task.js'>07-Run_box_as_task.js</a></div>
      <div style="font-size:11px;text-align:left;padding-bottom:2px;">
         This example demonstrates also many ways of dragging Run bars:  
         Dragging bar by <b>left</b> mouse button moves the single bar freely.<br /> 
         By <b>shift + left</b> button moves the bar to another row. Moves all selected boxes, if the dragged box is selected.
         By <b>right</b> button selects range of boxes.
      </div>
      <div class="Main" style='width:100%; height:548px;'>
         <bdo Debug='check' Data_Url='07-Run_box_as_task.js'></bdo>
      </div>
   </center>

   <ul>
      <li>
         There are five tutorials for Gantt task types and features:
         <ul>
            <li><a href='../GanttMainBar/01-Main_bar.html'>1. Simple Main bar and Milestone</a> - Continuous bar or one milestone</li>
            <li><a href='../GanttMainBar/02-Main_bar_parts.html'>2. Main bar parts</a> - Discrete main bar with more milestones</li>
            <li><a href='../GanttMainBar/03-Main_bar_plans.html'>3. Main bar plans</a> - More independent main bars or milestones in one row</li>
            <li><a href='06-Run_bar_as_task.html'>6. Run bar as task</a> - Complex and extended Gantt task from individual parts</li>
            <li>7. Run box as task - Every Run box as independent Gantt task</li>

         </ul>
      </li>
      <li>
         There are five tutorials for Gantt Run to show the run definition and all its features:
         <ul>
            <li><a href='01-Run_array_definition.html'>1. Run array definition</a> - Defining Gantt Run by Array string in GanttRun attribute</li>
            <li><a href='02-Run_JSON_definition.html'>2. Run JSON definition</a> - Defining Gantt Run by JSON string in GanttRun attribute</li>
            <li><a href='03-Run_summary_definition.html'>3. Run summary definition</a> - Defining Gantt Run by child main bars</li>
            <li><a href='04-Run_drag.html'>4. Run drag</a> - Run box resizing and moving by mouse dragging</li>
            <li><a href='05-Run_groups_and_API.html'>5. Run groups and API</a> - Identification of Run boxes and API to manipulate individual boxes and their groups</li>
         </ul>
      </li>
      <li>See documentation for <b><a href="../../Doc/GanttRun.htm">Run bar</a></b></li>
      <li><b>To use Run box as task set "<h4>box</h4>" flag to </b><h3>GanttTask</h3>.<br />
         In this case every run box will be one Gantt task. So there can be many Gantt tasks in one cell.<br />
         To have all Run boxes together as one Gantt task set "run" to GanttTask, see the tutorial <a href='06-Run_bar_as_task.html'>6. Run bar as task</a>.
      </li>
      <li>
         The Run box <h4>percentage completion</h4> is set individually for every box by GanttRun part <b>11</b> <h3>Complete</h3> attribute in range 0 - 100.
         If used calendar / excluded dates, the percentage completion can be shown preciselly for the excluded dates if set <b>GanttExcludeComplete</b>.<br />
         To round the percentage completion to some units (GanttUnits or GanttDataUnits) when is set by click to bar use <b>GanttRoundComplete</b>. 
         It restricts also incomplete bars for very small completion.
      </li>
      <li>
         The Run box can be <h4>disabled</h4> or <h4>locked</h4>. The box state is set individually for every box by GanttRun part <b>7</b> <h3>State</h3>, values <b>disabled</b> or <b>locked</b>.<br />
         Disabled task cannot be changed and is also ignore in all calculations. Locked tasks cannot be changed.<br />
         It is possible to permit changing the disabled/locked tasks manually by a user by <b>GanttEditDisabled</b>='1'.<br />
         To have not editable all boxes in row, remove the run... flags from <b>GanttEdit</b> and also set <b>CanEdit='0'</b> to all the source cells.<br />
      </li>
      <li>
         <h4>Dependencies</h4> are attached individually for every box. Normally by <h3>GanttDescendants</h3> or by <h3>GanttAncestors</h3>.<br />
         <i>The box must have set or generated its <h3>Id</h3> attribute (part <b>5</b> of the GanttRun) to attach dependencies to it.</i><br />
         Every the box is identified by its Id and optionally by Group value as Id or Group$Id, e.g GanttDescendants="B1,B2@R1" or "B1,B3@R2#11;G1$B1,G2$B1@R3"<br />
         See documentation for <a href="../../Doc/GanttCompute.htm#Dependencies">Defining dependencies</a>.
      </li>
      <li>
         <h4>Manual start</h4> for correcting dependencies is set individually for every box by GanttRun part <b>10</b> <h3>Manual</h3> <br />
         It is permitted / controlled by attributes <b>GanttRunManualChange</b> and <b>GanttManualSide</b>.<br />
      </li>
      <li>
         <h4>Resources</h4> are attached individually for every box by GanttRun part <b>12</b> <h3>Resources</h3> <br />
         See documentation for <a href="../../Doc/GanttResources.htm#Assign">Resources assign</a>.
      </li>
      <li>
         The Run box as Gantt task supports standard settings for individual boxes like <b>text</b>, <b>tooltip</b>, <b>class</b>, <b>color</b> and so on.<br />
      </li>
   </ul>

   <!-- Google Analytics code run once for trial -->
   <script>
      var TGTrial = document.cookie.match(/TGTrialRun\s*=\s*(\d+)/), TGIndex = 64;
      if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
         var n = "RunTrialGridRun7", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialRun="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
         var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
         var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
               +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
         var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
         },100);
   </script>
</body>
</html>